<template>
    <div class="situation">
        <div class="head">
            <div class="left">
                <div class="item">
                    <div class="square forRent"></div>
                    <div class="name">待租</div>
                </div>
                <div class="item">
                    <div class="square leased"></div>
                    <div class="name">已租</div>
                </div>
            </div>
            <div class="right">
                <div :class="['arrow', 'prev', pageConfig.page == 1 ? 'disable' : '']" @click="handlerPageChange(0)"></div>
                <div :class="['arrow', 'next', pageConfig.page * pageConfig.pageSize >= pageConfig.total ? 'disable' : '']" @click="handlerPageChange(1)"></div>
            </div>
        </div>
        <div class="content" v-for="item in showData">
            <p class="title">{{ item.floor }}</p>
            <div :class="['room', ['', 'leased'][child.status]]" v-for="child in item.children"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const rooms: any = ref([])

const pageConfig = ref({
    total: 15,
    page: 1,
    pageSize: 8
})

const showData = ref([])

const handlerPageChange = (type: number) => {
    let { total, page, pageSize } = pageConfig.value
    const copyList = JSON.parse(JSON.stringify(rooms.value))
    if (type == 0) {
        if (page <= 1) return
        page--
        showData.value = copyList.splice((page - 1) * pageSize, pageSize)
    } else {
        if (page * pageSize >= total) return
        page++
        showData.value = copyList.splice((page - 1) * pageSize, pageSize)
    }

    pageConfig.value = {
        total: total,
        page,
        pageSize: 8
    }
}

/**
 * 计算随机房间号
 */
function generateRooms() {
    const arr = []
    // 生成所有房间号
    for (let floor = 1; floor <= 13; floor++) {
        for (let room = 1; room <= 10; room++) {
            const roomNumber = `${floor}0${room}`
            const findObj = arr.find((item: any) => item.floor == `${floor}F`)
            if (findObj) {
                findObj.children.push({ roomNumber, status: 0 })
            } else {
                arr.push({ floor: `${floor}F`, children: [{ roomNumber, status: 0 }] })
            }
        }
    }

    for (const room of arr) {
        // 将房间号随机标记为已占用
        for (let i = 1; i <= 4; i++) {
            const index = Math.floor(Math.random() * arr.length + 1)
            if (room.children[index]) {
                room.children[index].status = 1
            }
        }
    }
    const copyList = JSON.parse(JSON.stringify(arr))

    showData.value = copyList.splice(0, 8)
    rooms.value = arr
    console.log(showData.value, 'showData.value')
}

onMounted(() => {
    generateRooms()
})
</script>

<style scoped lang="scss">
.situation {
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 450px;
    color: #ffffff;
    .head {
        display: flex;
        justify-content: space-between;
        .forRent {
            background-image: linear-gradient(0deg, #6593df4d 0%, #6e89b400 100%);
            border: 1px solid #72a8d4cc;
        }

        .leased {
            background-image: linear-gradient(0deg, #f38e6b4d 0%, #f38e6b00 100%);
            border: 1px solid #dd934ecc;
        }

        .square {
            width: 10px;
            height: 10px;
            border-radius: 2px;
        }
        .left {
            display: flex;
            justify-content: center;
            flex: 1;
            .item {
                margin-right: 10px;
                display: flex;
                align-items: center;
                .name {
                    margin-left: 5px;
                    font-size: 14px;
                    color: #fff;
                    opacity: 0.7;
                }
            }
        }
        .right {
            display: flex;
            .arrow {
                width: 20px;
                height: 40px;
                cursor: pointer;
            }

            .prev {
                background: url('@/assets/images/基础/page_left.png') no-repeat;
                background-size: contain;
                margin-right: 10px;
            }

            .next {
                background: url('@/assets/images/基础/page_right.png') no-repeat;
                background-size: contain;
            }

            .disable {
                opacity: 0.4;
            }
        }
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .title {
            margin-right: 20px;
            font-size: 18px;
        }
        .room {
            width: 25px;
            height: 25px;
            border: 1px solid #72a8d4cc;
            border-radius: 5px;
            background-image: linear-gradient(0deg, #6593df4d 0%, #6e89b400 100%);
        }
        .leased {
            background-image: linear-gradient(0deg, #f38e6b4d 0%, #f38e6b00 100%);
            border: 1px solid #dd934ecc;
            border-radius: 2px;
        }
    }
}
</style>
